// import logo from './logo.svg';
import './App.css';
// import CustomLink from "./components/custom-link/index";
// import RouteDemo from "./components/url-params/index";
// import RedirectDemo from "./components/redirect/index";
// import QueryParams from "./components/query-params/index";
// import RouteConfig from "./components/route-config/index";
// import ModalGallery from "./components/modal-gallery/index";
// import AuthExample from "./components/auth-example/index";
import UseStateDemo from "./components/use-state/index";
// import UseEffectDemo from "./components/use-effect/index";
import UseRefDemo from "./components/use-ref/index";
// import UseEffectDemo from "./components/use-effect/index";
// import UseMemoDemo from "./components/use-memo/index";
// import UseReducerDemo from "./components/use-reducer/index";
import CustomDemo from "./components/custom-hook/index";
import { Item1 } from "./components/use-context/index";
import {Fragment, createRef} from "react";
import Counter from "./components/counter";
import PureComDemo from "./components/pure-component/index";
import StateDemo from "./components/set-state";
import PropsDemo from "./components/props";
import Calculator from "./components/state-advance";
// import routes from "./routes";
import {BrowserRouter as Router,Route,Switch} from "react-router-dom";
import {Button} from "antd";
import withPersistentData,{MyComponent} from "./components/my-component";
import UserNav from "./components/user-nav";

const MyComponentWithPersistentData = withPersistentData(MyComponent);
// react 的路由应该也可以像 vue-router 那样按照配置来渲染的吧？

function App() {
  var show = true;
  var ref = createRef(1);
  var ref1 = createRef(0);
  var d= null;
  var desc = "";
  var onClick = function(e){
      show = !show;
      console.log("ref:");
      console.log(ref);
      console.log(ref1);
      console.log("d:");
      console.log(d);
  }
  function changeDesc(e){
    console.log("change desc");
    console.log(e.target.value);
    //只有setState 能更新页面
    desc = e.target.value;
  }
  var menus = ["首页","商品","订单","我的"];
  var user = {name:'katy',age: 30};
  var style = {fontSize: '1rem',color: 'red'};
  var navMenus = [
    {
      text: "首页",
      icon: "home",
      path: "/index"
    },
    {
      text: "商品",
      icon: "products",
      path: "/products"
    },
    {
      text: "订单",
      icon: "order",
      path: "/order"
    },
    {
      text: "我的",
      icon: "me",
      path: "/me"
    }
  ];
  return (
    <Fragment>
      <h3>菜单组件</h3>
      <div class="row">
        <UserNav data={navMenus}></UserNav>
      </div>

      <h3>菜单组件</h3>
      <div class="row">
        {/* <UserNav data={navMenus}></UserNav> */}
      </div>

      <h3>菜单组件</h3>
      <div class="row">
        {/* <UserNav data={navMenus}></UserNav> */}
      </div>
      
      <textarea onChange={changeDesc} value={desc}></textarea>
      <div>111{desc}</div>
      {/* 这个普通的map为何失效 */}
      {/* <ul>
        {
          menus.map((ele,index) => {
            (<li key={index}>{ele}</li>)
          })
        }
      </ul>
      <div>
        <Button type="primary">Primary Button</Button>
      </div>
      <button onClick={onClick}>隐藏 demo</button> */}
      {/* <CustomLink /> */}
      {/* <RouteDemo/> */}
      {/* <RedirectDemo/> */}
      {/* <RouteConfig/> */}
      {/* <ModalGallery/> */}
      <UseStateDemo/>
      {/* {
        show && <UseEffectDemo/>
      } */}
      {/* <MyComponent data={changeDesc} style={style}/> */}
      {/* <MyComponentWithPersistentData user={{name:'katy',age: 30}}/> */}
      {/* <StateDemo/> */}
      {/* <Counter/> */}
      {/* <UseRefDemo/> */}
      {/* <UseMemoDemo/> */}
      {/* <UseReducerDemo/> */}
      <CustomDemo/>
      {/* <Item1 ref={ref1}/> */}
      {/* <PropsDemo/> */}
      {/* <StateDemo/> */}
      {/* <PureComDemo/> */}
      {/* <Calculator/> */}
      {/* <Item1 ref={ref1}/> */}
      {/* <Item3 ref={ref}/> */}
      
      {/* <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header> */}
    </Fragment>
  );
}

export default App;
